﻿<div id="editMovieWrapper">
    <hr>
    <div class="row">
        <!-- left column -->
        <div class="col-xs-3">
            <div class="text-center">
                <img src="../../Content/images/movies/unknown.jpg" class="avatar img-responsive" alt="avatar">
                <h6>Add photo...</h6>
            </div>
        </div>

        <!-- edit form column -->
        <div class="col-xs-9 personal-info">
            <div class="alert alert-info alert-dismissable">
                <a class="panel-close close" data-dismiss="alert">×</a>
                <i class="fa fa-plus"></i>
                Add <strong>{{movie.Title}}</strong> movie. Make sure you fill all required fields.
            </div>

            <form class="form-horizontal" novalidate #addMovieForm="ngForm" (ngSubmit)="AddMovie()">
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6 col-sm-4">
                            <label class="control-label">Movie title</label>
                            <input class="form-control" name="title" type="text" [(ngModel)]="movie.Title" id="title" #title="ngModel" required />
                            <div [hidden]="title.valid||title.pristine" class="alert alert-danger">Movie title is required</div>          
                        </div>

                        <div class="col-xs-6 col-sm-4 selectContainer">
                            <label class="control-label">Genre</label>
                            <select [(ngModel)]="movie.GenreId" class="form-control black" id="genreid" name="genreid" #genreid="ngModel" required>
                                <option *ngFor="let option of genres" [value]="option.ID">{{option.Name}}</option>
                            </select>
                            <div [hidden]="genreid.valid||genreid.pristine" class="alert alert-danger">Movie Genre is required</div>
                        </div>

                        <div class="col-xs-6 col-sm-4">
                            <label class="control-label">Stocks</label>
                            <div class="input-group number-spinner">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" data-dir="dwn" (click)="changeNumberOfStocks($event)"><span class="glyphicon glyphicon-minus"></span></button>
                                </span>
                                <input type="text" class="form-control text-center" id="inputStocks" [(ngModel)]="movie.NumberOfStocks" name="inputStocks" #inputStocks="ngModel">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" (click)="changeNumberOfStocks($event)" id="btnSetStocks" data-dir="up"><span class="glyphicon glyphicon-plus"></span></button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-4">
                            <label class="control-label">Director</label>
                            <input class="form-control" type="text" [(ngModel)]="movie.Director" name="director" id="director" #director="ngModel" required />
                            <div [hidden]="director.valid||director.pristine" class="alert alert-danger">Movie director is required</div>
                        </div>

                        <div class="col-xs-4">
                            <label class="control-label">Writer</label>
                            <input class="form-control" type="text" [(ngModel)]="movie.Writer" name="writer" id="writer" #writer="ngModel"  required />
                            <div [hidden]="writer.valid||writer.pristine" class="alert alert-danger">Movie writer is required</div>
                        </div>

                        <div class="col-xs-4">
                            <label class="control-label">Producer</label>
                            <input class="form-control" type="text" [(ngModel)]="movie.Producer" name="producer" id="producer" #producer="ngModel" required />
                            <div [hidden]="producer.valid||producer.pristine" class="alert alert-danger">Movie producer is required</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6">
                            <label class="control-label">Release Date</label>
                            <p class="input-group">
                                <input type="text" class="form-control" name="dateReleased" [(ngModel)]="movie.ReleaseDate" id="dateReleased" #dateReleased="ngModel"  required  />
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="openDatePicker($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                            </p>
                        </div>

                        <div class="col-xs-6">
                            <label class="control-label">Youtube trailer</label>
                            <input class="form-control" type="text" [(ngModel)]="movie.TrailerURI" name="trailerURI" id="trailerURI" #trailerURI="ngModel" required />
                            <div [hidden]="dateReleased.valid||dateReleased.pristine" class="alert alert-danger">You must enter a valid YouTube URL</div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label">Description</label>
                    <textarea class="form-control" [(ngModel)]="movie.Description" name="description" rows="3" id="description" #description="ngModel" required ></textarea>
                    <div [hidden]="description.valid||description.pristine" class="alert alert-danger">Movie description is required</div>
                </div>

                <div class="form-group col-xs-12">
                    <label class="control-label">Rating</label>
                    
                </div>
                <br/>
                <div class="form-group col-xs-4">
                    <label class="control-label"></label>
                    <div class="">
                        <input type="submit" class="btn btn-primary" value="Submit movie" />
                        <span></span>
                        <a class="btn btn-default" href="#/movies/{{movie.ID}}">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <hr>
</div>